import React, { useState } from 'react';
import {
  IonToolbar,
  IonInput,
  IonButton,
  IonIcon,
} from '@ionic/react';
import { send, mic } from 'ionicons/icons';

interface ChatInputProps {
  onSend: (text: string) => void;
  isLoading: boolean;
}

const ChatInput: React.FC<ChatInputProps> = ({ onSend, isLoading }) => {
  const [text, setText] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (text.trim() && !isLoading) {
      onSend(text);
      setText('');
    }
  };

  return (
    <IonToolbar>
      <form onSubmit={handleSubmit} className="ion-padding-horizontal">
        <div className="flex-input-container">
          <IonButton fill="clear">
            <IonIcon icon={mic} />
          </IonButton>
          
          <IonInput
            value={text}
            onIonInput={e => setText(e.detail.value || '')}
            placeholder="有问题，尽管问"
            className="chat-input"
            disabled={isLoading}
          />
          
          <IonButton 
            type="submit" 
            fill="clear" 
            disabled={!text.trim() || isLoading}
          >
            <IonIcon icon={send} />
          </IonButton>
        </div>
      </form>
    </IonToolbar>
  );
};

export default ChatInput;